<script>
import BottomTab from "@/conponents/BottomTab.vue";
import { mapGetters } from "vuex";
import requestUtil from "@/utils/RequestUtil";

export default {
  name: "MyHome",
  components: { BottomTab },
  data() {
    return {
      username: "游客",
      vipLevel: "黄金会员",
      img: "",
    };
  },
  methods: {
    requestUtil,
    ...mapGetters(["getUserInfo"]),
    init() {
      let userInfo = this.getUserInfo();
      this.username = userInfo.username;
      this.vipLevel = userInfo.power;
      if (userInfo.img) {
        this.img = "http://47.115.208.111:8080" + "/" + userInfo.img;
      }
    },
    upload(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      requestUtil({
        headers: {
          token: this.getUserInfo().token,
        },
        method: "post",
        url: "/user/upload",
        data: formData,
      }).then((res) => {
        this.$store.commit("setUserInfo", { img: res.data.data.uri });
        this.img = "http://47.115.208.111:8080" + "/" + res.data.data.uri;
      });
    },
    onNameClick() {
      if (!this.$store.state.userInfo) {
        this.$router.push({ name: "login" });
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<template>
  <div style="background-color: rgb(245, 245, 245); padding-bottom: 50px">
    <div class="container">
      <header
        style="
          height: 50px;
          display: flex;
          justify-content: end;
          align-items: center;
          margin-right: 10px;
        "
      >
        <van-icon
          @click="$router.push({ name: 'noticeNotice' })"
          color="white"
          dot
          name="chat-o"
          size="30"
          style="margin-right: 10px"
        />
        <van-icon
          @click="$router.push({ name: 'setSet' })"
          color="white"
          name="setting-o"
          size="30"
        />
      </header>
      <div
        style="
          display: flex;
          justify-content: start;
          align-items: center;
          margin-left: 30px;
        "
      >
        <van-uploader
          :after-read="upload"
          :disabled="username === '游客'"
          preview-size="60"
        >
          <template #default>
            <van-icon
              v-if="!img"
              color="white"
              name="user-o"
              size="60"
              style="
                border: white 2px solid;
                border-radius: 50%;
                width: 70px;
                height: 70px;
                display: flex;
                justify-content: center;
              "
            />
            <img
              v-if="img"
              :src="img"
              alt="face"
              style="
                border: white 2px solid;
                border-radius: 50%;
                width: 70px;
                height: 70px;
                display: flex;
                justify-content: center;
              "
            />
          </template>
        </van-uploader>
        <span @click="onNameClick" style="font-size: 18px; margin-left: 10px">{{
          username
        }}</span>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 50px;
          margin-top: 30px;
          padding-bottom: 20px;
        "
      >
        <div>
          <van-icon color="rgb(247,214,128)" name="diamond-o" />
          <span style="color: rgb(247, 214, 128); font-size: 16px">{{
            vipLevel
          }}</span>
        </div>
        <span style="font-size: 16px">立即开通</span>
      </div>
    </div>
    <van-grid
      :border="false"
      column-num="3"
      style="background-color: white; margin: 20px"
    >
      <van-grid-item>
        <span>暂无</span>
        <span style="color: rgb(117, 120, 125); font-size: 12px">积分</span>
      </van-grid-item>
      <van-grid-item>
        <span>暂无</span>
        <span style="color: rgb(117, 120, 125); font-size: 12px">成长值</span>
      </van-grid-item>
      <van-grid-item>
        <span>暂无</span>
        <span style="color: rgb(117, 120, 125); font-size: 12px">优惠券</span>
      </van-grid-item>
    </van-grid>
    <van-grid
      :border="false"
      column-num="4"
      style="background-color: white; margin: 20px"
    >
      <van-grid-item
        @click="$router.push({ name: 'orderOrder', query: { state: '-1' } })"
      >
        <van-icon
          color="rgb(250,67,106)"
          name="orders-o"
          size="28"
          style="margin-bottom: 3px"
        />
        <span style="color: rgb(117, 120, 125); font-size: 12px">全部订单</span>
      </van-grid-item>
      <van-grid-item
        @click="$router.push({ name: 'orderOrder', query: { state: '0' } })"
      >
        <van-icon
          color="rgb(250,67,106)"
          name="todo-list-o"
          size="28"
          style="margin-bottom: 3px"
        />
        <span style="color: rgb(117, 120, 125); font-size: 12px">待付款</span>
      </van-grid-item>
      <van-grid-item
        @click="$router.push({ name: 'orderOrder', query: { state: '1' } })"
      >
        <van-icon
          color="rgb(250,67,106)"
          name="send-gift-o"
          size="28"
          style="margin-bottom: 3px"
        />
        <span style="color: rgb(117, 120, 125); font-size: 12px">待收货</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon
          color="rgb(250,67,106)"
          name="refund-o"
          size="28"
          style="margin-bottom: 3px"
        />
        <span style="color: rgb(117, 120, 125); font-size: 12px"
          >退款/售后</span
        >
      </van-grid-item>
    </van-grid>
    <van-cell-group inset style="margin-bottom: 10px">
      <van-cell
        :to="{ name: 'addressList' }"
        is-link
        size="large"
        title="地址管理"
        title-style="display: flex;margin-left: 3px"
      >
        <template #icon>
          <van-icon color="rgb(95, 205, 162)" name="location" size="20" />
        </template>
      </van-cell>
      <van-cell
        is-link
        size="large"
        title="我的足迹"
        title-style="display: flex;margin-left: 5px"
        to="pages/history/History"
      >
        <template #icon>
          <van-icon color="rgb(224, 116, 114)" name="underway" size="18" />
        </template>
      </van-cell>
      <van-cell
        is-link
        size="large"
        title="我的关注"
        title-style="display: flex;margin-left: 5px"
        to="pages/care/List"
      >
        <template #icon>
          <van-icon color="rgb(95, 205, 162)" name="like" size="18" />
        </template>
      </van-cell>
      <van-cell
        is-link
        size="large"
        title="我的收藏"
        title-style="display: flex;margin-left: 5px"
        to="pages/collection/Collection"
      >
        <template #icon>
          <van-icon color="rgb(84, 180, 239)" name="star" size="18" />
        </template>
      </van-cell>
      <van-cell
        is-link
        size="large"
        title="我的评价"
        title-style="display: flex;margin-left: 5px"
        to="index"
      >
        <template #icon>
          <van-icon color="rgb(238, 136, 59)" name="fire" size="18" />
        </template>
      </van-cell>
      <van-cell
        is-link
        size="large"
        title="设置"
        title-style="display: flex;margin-left: 5px"
        :to="{ name: 'setSet' }"
      >
        <template #icon>
          <van-icon color="rgb(95, 205, 162)" name="setting" size="18" />
        </template>
      </van-cell>
    </van-cell-group>
    <BottomTab />
  </div>
</template>

<style scoped>
:deep(.van-uploader__wrapper--disabled) {
  opacity: 1;
}

.container {
  background-image: url("@/assets/user-bg.jpg");
  border-bottom-left-radius: 100% 30%;
  border-bottom-right-radius: 145% 33%;
}
</style>
